<template>
    <div id="box">
        <div id="search">
            <el-form :inline="true" :model="courseSearch" class="demo-form-inline">
                <el-form-item label="课程名">
                    <el-input v-model="courseSearch.searchParams.courseName" placeholder="请输入课程"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="onSearchSubmit">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div id="header-bth">
            <el-button type="primary" size="small" icon=el-icon-circle-plus-outline @click="showAddDept">添加</el-button>
        </div>
        <div id="course-table">
            <el-table
                    :data="tableData"
                    stripe
                    style="width: 100%">
                <el-table-column label="课程名称">
                    <template slot-scope="scope">
                        <span style="margin-left: 20px">{{ scope.row.courseName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="课程编号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.courseNo }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="状态">
                    <template v-slot="scope">
                        <el-switch
                            v-model="scope.row.isDelete"
                            active-text="正常"
                            inactive-text="停课"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="0"
                            :inactive-value="1"
                            @change="changeStatus(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.createTime }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280px">
                    <template slot-scope="scope">
                        <el-button
                                icon="el-icon-edit"
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">
                        </el-button>

                        <el-popconfirm title="确定删除吗？" @confirm="deleteDept(scope.$index, scope.row)">
                            <el-button
                                    slot="reference"
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete">
                            </el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div id="nav-page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="pageSizes"
                    :page-size="courseSearch.limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <!--添加 编辑课程信息弹窗-->
        <el-dialog :title="dialogTitle" :visible.sync="addCourseFormVisible" width="30%" @close="clearInfo">
            <el-form :model="courseForm" ref="courseInfo" :rules="courseRules" label-width="90px" size="medium">
                <el-input v-model="courseForm.id" autocomplete="off" v-show="false"></el-input>
                <el-form-item label="课程名称" prop="courseName">
                    <el-input v-model="courseForm.courseName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="课程编号" prop="courseNo">
                    <el-input v-model="courseForm.courseNo" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveOrUpdate">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>

import {addOrUpdateCourse, coursePage, deleteCourse, editCourseState} from "@/api/course";

    export default {
        name: "CourseView",
        data() {
            return {
                tableData: [],
                addCourseFormVisible: false,
                dialogTitle: '添加课程',
                courseForm: {},
                courseSearch: {
                    limit: 5,
                    page: 1,
                    searchParams: {
                        courseName: ''
                    }
                },
                pageSizes: [5, 10,15],
                total: 10,
                courseRules: {}
            }
        },
        methods: {
            changeStatus(row){
                editCourseState(row.isDelete,row.id).then(response=>{
                    if (response.code==0){
                        this.$notify.success(response.message)
                        this.list()
                    }
                })
            },
            // 改变每页显示的条数触发
            handleSizeChange(val) {
                this.courseSearch.limit = val;
                this.list()
            },
            // 改变页码触发
            handleCurrentChange(val) {
                this.courseSearch.page = val;
                this.list()
            },
            //删除课程信息
            deleteDept(index, row) {
                deleteCourse(row.id).then(response=>{
                    if (response.code==0){
                        this.$notify.success(response.message)
                        this.list()
                    }
                })
            },
            // 显示添加课程信息弹窗
            showAddDept() {
                this.dialogTitle = '新增'
                this.addCourseFormVisible = true
            },
            //编辑课程信息
            handleEdit(index, row) {
                this.dialogTitle = '编辑'
                this.addCourseFormVisible = true
                //发送异步请求 回显数据
                this.courseForm = row

            },
            // 添加更新课程
            saveOrUpdate() {
                addOrUpdateCourse(this.courseForm).then(response=>{
                    if (response.code==0){
                        this.$notify.success(response.message)
                        this.addCourseFormVisible = false
                        this.list()
                    }
                })
            },
            // 搜索课程信息
            onSearchSubmit() {
                this.courseSearch.page = 1
                this.list()
            },
            // 关闭弹窗清空数据
            clearInfo() {
                this.courseForm = {}
                this.$refs.courseInfo.clearValidate()
                this.list()
            },

            list() {
                coursePage(this.courseSearch).then(response=>{
                    if (response.code==0){
                        this.total = response.data.total
                        this.tableData = response.data.tableData
                    }
                })
            }
        },
        created() {
            // 获取课程信息列表
            this.list()
        }
    }
</script>

<style scoped>

    #box {
        width: 95%;
        margin: 5px auto 0;
    }

    #search {
        margin-top: 20px;
        padding: 5px;
        border-bottom: 1px solid #eee;
    }

    #header-bth {
        margin-top: 20px;
        margin-bottom: 20px;
    }


    #nav-page {
        margin-top: 15px;
        margin-bottom: 30px;
    }

    .el-button {
        margin-left: 5px;
        margin-right: 5px;
    }
</style>
